<template>
	<view :style="dynamicStyles">
		<u-notice-bar mode="horizontal" :list="getNoticeText" :color="showData.color"
			:duration="showData.direction" :bg-color="showData.bgColor"></u-notice-bar>
	</view>
</template>

<script setup lang="ts">
import { toJumpUrl } from '@/utils/index';

interface ShowData {
	commonStyle?: any | null;
	color: string;
	bgColorDirection: string;
	bgStartColor: string;
	bgEndColor: string;
	contentList: any[];
	speed: number;
	direction: string;
}
const props = defineProps<{
	showData: ShowData;
}>();
const getNoticeText = computed(() => {
	return props.showData.contentList.map(v => v.content);
})
const dynamicStyles = computed(() => {
	const commonStyle = props.showData.commonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding - 10}px`,
		paddingLeft: `${commonStyle.styleLeftPadding - 10}px`,
		paddingRight: `${commonStyle.styleRightPadding - 10}px`,
		paddingBottom: `${commonStyle.styleBottomPadding - 10}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		color: props.showData.color,
		...(commonStyle.bgPicUrl && {
			background: `url(${commonStyle.bgPicUrl})`,
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center',
			backgroundSize: '100% 100%'
		}),
		...(!commonStyle.bgPicUrl && {
			background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
		}),
	};
});
// 跳转
const toPage = (text: string, index: number) => {
	const item = props.showData.contentList[index];
	if (item.type === 1) {
		toJumpUrl(item.url);
	}
}
</script>

<style lang="scss" scoped></style>
